<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>发布文章</title>
		<link rel="stylesheet" href="../style/Publish an article_one.css" />
		<link rel="stylesheet" href="../style/swiper-3.4.2.min.css" />
		<script src="../Resources/flexible.debug.js"></script>
		<script src="../Resources/flexible_css.debug.js"></script>
		<script src="../Resources/jquery-3.2.0.js"></script>
		<script src="../Resources/artTemplate.js"></script>
		<script src="../Resources/swiper/swiper.min.js"></script>
	</head>

	<body>
		<header>
			<span id="back"><img src="../imges/qietu/jiantou.png"/></span>
			<span>发布文章</span>
		</header>

		<div class="swiper-container box">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<main class="main_one">
					</main>
				</div>
				<div class="swiper-slide">
					<main class="main_two">

					</main>
				</div>
				<div class="swiper-slide">
					<main class="main_three">

					</main>
				</div>
			</div>

			<!--如果需要分页器-->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<!--<div class="swiper-button-prev"></div>-->
			<!--<div class="swiper-button-next"></div>-->

			<!-- 如果需要滚动条 -->
			<!--<div class="swiper-scrollbar"></div>-->
		<br />
		<br />
		<br />
		<br />
		</div>
		<footer>
			<p>成为堆糖生活家，开启文章写作></p>
		</footer>
		<script type="text/html" id="temp_one">
			{{each list as v}}
			<h1>{{v.text}}</h1>
			<h4>{{v.font}}</h4>
			<img src="{{v.imgs}}" /> {{/each}}
		</script>
		<script type="text/html" id="temp_two">
			{{each list as v}}

				<img src="{{v.imgs}}" />
				<h1>{{v.text}}</h1>
				<h4>
					<span>{{v.font_one}}</span>
					<span>{{v.font_two}}</span>
					<span>{{v.font_three}}</span>
					<span>{{v.font_four}}</span>
				</h4> 
			{{/each}}
		</script>
		<script type="text/html" id="temp_three">
			{{each list as v}}

				<img src="{{v.imgs}}" />
				<h1>{{v.text}}</h1>
				<h4>
					<span>{{v.font_five}}</span>
					<span>{{v.font_six}}</span> 
					<span>{{v.font_seven}}</span> 
					<span>{{v.font_eight}}</span>
				</h4> 
			{{/each}}
		</script>

		<script type="text/javascript">
		$("#back").click(function(){
			
			location.href = "arcrice.html"
		})
			$.ajax({
				type: "get",
				url: "../ajax/publishanarticle_one.json",
				async: true,
				success: function(data) {
					console.log(data)
					console.log(data[0])
					infos = data[0]
					var str = template("temp_one", { list: [infos] });
					$(".main_one").append(str)
				}
			});
			$.ajax({
				type: "get",
				url: "../ajax/publishanarticle_one.json",
				async: true,
				success: function(data) {
					console.log(data)
					console.log(data[1])
					infos = data[1]
					var str = template("temp_two", { list: [infos] });
					$(".main_two").append(str)
				}
			});
			$.ajax({
				type: "get",
				url: "../ajax/publishanarticle_one.json",
				async: true,
				success: function(data) {
					console.log(data)
					console.log(data[2])
					infos = data[2]
					var str = template("temp_three", { list: [infos] });
					$(".main_three").append(str)
				}
			});

			var mySwiper = new Swiper('.swiper-container', {
				//				direction: 'vertical',
				loop: true,

				// 如果需要分页器
				pagination: '.swiper-pagination',

				// 如果需要前进后退按钮
				//				nextButton: '.swiper-button-next',
				//				prevButton: '.swiper-button-prev',

				// 如果需要滚动条
				//				scrollbar: '.swiper-scrollbar',
			})
		</script>

	</body>

</html>